<template>
  <div>
    <a-card :bordered="false">
      <detail-list title="超时预警" :col="1">
        <detail-list-item term="发货超时"
          >提交服务单后
          <a-select style="width: 120px" @change="handleChange">
            <a-select-option :value="item" v-for="item in timeList" :key="item">
              {{ item }}
            </a-select-option>
          </a-select>
          小时后提示</detail-list-item
        >
        <detail-list-item term="签收超时"
          >所有商品发货后
          <a-select style="width: 120px" @change="handleChange">
            <a-select-option :value="item" v-for="item in timeList" :key="item">
              {{ item }}
            </a-select-option>
          </a-select>
          小时后提示</detail-list-item
        >
        <detail-list-item term="还货超时"
          >所有商品签收后
          <a-select style="width: 120px" @change="handleChange">
            <a-select-option :value="item" v-for="item in timeList" :key="item">
              {{ item }}
            </a-select-option>
          </a-select>
          小时后提示</detail-list-item
        >
      </detail-list>
      <a-divider style="margin-bottom: 32px" />
      <detail-list title="补单限制" :col="1">
        <detail-list-item term="搭配师">
          <a-select style="width: 120px" @change="handleChange">
            <a-select-option :value="item" v-for="item in times" :key="item">
              {{ item }}
            </a-select-option>
          </a-select>
          次，
          <a-select style="width: 120px" @change="handleChange">
            <a-select-option :value="item" v-for="item in times" :key="item">
              {{ item }}
            </a-select-option>
          </a-select>
          件
        </detail-list-item>
        <detail-list-item term="导购">
          <a-select style="width: 120px" @change="handleChange">
            <a-select-option :value="item" v-for="item in times" :key="item">
              {{ item }}
            </a-select-option>
          </a-select>
          次，
          <a-select style="width: 120px" @change="handleChange">
            <a-select-option :value="item" v-for="item in times" :key="item">
              {{ item }}
            </a-select-option>
          </a-select>
          件
        </detail-list-item>
      </detail-list>
      <div style="text-align: center;margin-top:32px">
        <a-button htmlType="submit" type="primary">保存</a-button>
        <a-button style="margin-left: 18px" @click="handleRest">重置</a-button>
      </div>
    </a-card>
  </div>
</template>
<script>
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item
export default {
  components: {
    DetailList,
    DetailListItem
  },
  data() {
    return {
      timeList: [3, 6, 12, 18, 24, 48, 72],
      times: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }
  },

  methods: {
    handleChange(value) {
      console.log(value)
    },
    handleRest() {}
  }
}
</script>
<style lang="less" scoped>
.title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
</style>
